<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css" />
    <script src="../js/vue.js"></script>
    <!-- 引入 ElementUI 组件库 -->
    <script src="../js/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>{{ headerText}}</el-header>
        <el-container>
          <el-aside width="200px">{{asideText}}</el-aside>
          <el-container>
            <el-main>{{ mainText }}</el-main>
            <el-footer>{{ footerText }}</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>

    <style>
      .el-header,
      .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: left;
        line-height: 60px;
      }

      .el-aside {
        background-color: #d3dce6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }

      .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 590px;
      }
    </style>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            headerText: "Header",
            asideText: "Aside",
            mainText: "Main",
            footerText: "Footer",
          };
        },
      });
    </script>
  </body>
</html>
